<% layout('/layouts/default.html', {title: 'activity_user管理', libs: ['validate','fileupload']}){ %>
<div class="main-content">
    <div class="box box-main">
        <div class="box-header with-border">
            <div class="box-title">
                <i class="fa fa-list-alt"></i> ${text(activityUser.isNewRecord ? '新增activity_user' : '编辑用户信息')}
            </div>
            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
            </div>
        </div>
        <#form:form id="inputForm" model="${activityUser}" action="${ctx}/user/activityUser/save" method="post"
        class="form-horizontal">
        <div class="box-body">
            <div class="form-unit">${text('基本信息--微信')}</div>
            <#form:hidden path="id" id="userId"/>
            <#form:hidden path="openid"/>
            <#form:hidden path="password"/>
            <#form:hidden path="nickName"/>
            <div class="row">
                <div class="col-xs-4">
                    <img class="profile-user-img img-responsive img-circle" src="${activityUser.avatarUrl}"
                         onerror="this.src='/js/static/images/default.jpg'">
                </div>
                <div class="col-xs-8 pull-left">
                    <div class="row">
                        <div class="col-xs-8">
                            <div class="form-group">
                                <label class="control-label col-sm-12 " title="">
                                    ${text('用户名')}：<i class="fa icon-question hide"></i>${activityUser.nickName}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-8">
                            <div class="form-group">
                                <label class="control-label col-sm-12 " title="">
                                    ${text('性别')}：<i class="fa icon-question hide"></i>${activityUser.gender == '1' ?
                                    '男' : (activityUser.gender == '2' ? '女' : '未知')}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-8">
                            <div class="form-group">
                                <label class="control-label col-sm-12" title="">
                                    ${text('城市')}：<i class="fa icon-question hide"></i>${activityUser.city}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-8">
                            <div class="form-group">
                                <label class="control-label col-sm-12" title="">
                                    ${text('省份')}：<i class="fa icon-question hide"></i>${activityUser.province}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-8">
                            <div class="form-group">
                                <label class="control-label col-sm-12" title="">
                                    ${text('国家')}：<i class="fa icon-question hide"></i>${activityUser.country}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-8">
                            <div class="form-group">
                                <label class="control-label col-sm-12" title="">
                                    ${text('语言')}：<i class="fa icon-question hide"></i>${activityUser.language}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-8">
                            <div class="form-group">
                                <label class="control-label col-sm-12" title="">
                                    ${text('登录状态')}：<i class="fa icon-question hide"></i>${activityUser.flag == '1' ?
                                    '在线' : '离线'}</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required hide">*</span> ${text('手机号')}：<i
                                    class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:input path="phone" maxlength="11" class="form-control"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required ">*</span> ${text('角色')}：<i
                                    class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:select path="role" dictType="ac_user_role" class="form-control required" />
                            </div>
                        </div>
                    </div>
                    <#form:hidden path="avatarUrl"/>
                    <#form:hidden path="gender"/>
                    <#form:hidden path="city"/>
                    <#form:hidden path="province"/>
                    <#form:hidden path="country"/>
                    <#form:hidden path="language"/>
                    <#form:hidden path="flag"/>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label col-sm-2" title="">
                                <span class="required hide">*</span> ${text('备注信息')}：<i
                                    class="fa icon-question hide"></i></label>
                            <div class="col-sm-10">
                                <#form:textarea path="remarks" rows="4" maxlength="500" class="form-control"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="entertainerInfo" style="display: none;">
                <div class="form-unit">${text('演艺人员信息')}</div>
                <#form:hidden name="et_id"/>
                <#form:hidden name="et_cases"/>
                <#form:hidden name="et_userId"/>
                <#form:hidden name="et_accessNumber"/>
                <#form:hidden name="et_showPictures" id="et_showPictures"/>
                <#form:hidden name="et_city"/>
                <div class="row">
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label col-sm-4" title="">
                                    <span class="required hide">*</span> ${text('头像')}：<i
                                        class="fa icon-question hide"></i></label>
                                <div class="col-sm-8">
                                    <img id="et_avatarImg" class="profile-user-img img-responsive img-circle"
                                         src="" onerror="this.src = '/js/static/images/cs.jpg'">
                                    <#form:imageclip name="imageBase64" btnText="修改头像" btnClass="btn-block"
                                    imageId="et_avatarImg" imageDefaultSrc="/js/static/images/default.jpg"
                                    circle="true"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label col-sm-4" title="">
                                    <span class="required hide">*</span> ${text('名字')}：<i
                                        class="fa icon-question hide"></i></label>
                                <div class="col-sm-8">
                                    <#form:input name="et_name" maxlength="25" class="form-control"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label col-sm-4" title="">
                                    <span class="required hide">*</span> ${text('手机号')}：<i
                                        class="fa icon-question hide"></i></label>
                                <div class="col-sm-8">
                                    <#form:input name="et_phone" maxlength="11" class="form-control mobile"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label col-sm-4" title="">
                                    <span class="required hide">*</span> ${text('性别')}：<i
                                        class="fa icon-question hide"></i></label>
                                <div class="col-sm-8">
                                    <#form:select name="et_gender" dictType="ac_user_sex" class="form-control required"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label col-sm-4" title="">
                                    <span class="required hide">*</span> ${text('年龄')}：<i
                                        class="fa icon-question hide"></i></label>
                                <div class="col-sm-8">
                                    <#form:input name="et_age" maxlength="2" class="form-control digits"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label col-sm-4" title="">
                                    <span class="required hide">*</span> ${text('展示图片')}：<i
                                        class="fa icon-question hide"></i></label>
                            </div>
                        </div>
                        <div class="col-sm-8 col-sm-offset-2">

                            <label style="display: none">
                                <#form:input name="activitySmimg" id="activitySmimg" maxlength="255"
                                class="form-control"/>
                            </label>
                            <div class="hidden">
                                <#form:fileupload id="upload" bizKey="${activityUser.id}"
                                bizType="activityUserEntertainer_photos" uploadType="image"
                                allowSuffixes=".jpg,.png,.jpeg" returnPath="true" filePathInputId="activitySmimg"
                                isMini="true" readonly="false"/>
                            </div>
                            <ul class="list-group" id="picturesUL">
                            </ul>
                            <label id="addPicture" class="btn btn-default">添加图片</label>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label col-sm-4" title="">
                                    <span class="required hide">*</span> ${text('服务城市')}：<i
                                        class="fa icon-question hide"></i></label>
                                <div class="col-sm-8">
                                    <#form:treeselect id="cityCode" title="${text('区域选择')}"
                                    name="et_cityCode"
                                    canSelectRoot="true" canSelectParent="true"
                                    returnFullName="false" returnFullNameSplit="-"
                                    url="${ctx}/sys/area/treeData"
                                    class="" allowClear="true"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label col-sm-4" title="">
                                    <span class="required hide">*</span> ${text('标签')}：用'|'分割 <i
                                        class="fa icon-question hide"></i></label>
                                <div class="col-sm-8">
                                    <#form:input name="et_label" maxlength="255" class="form-control"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label class="control-label col-sm-4" title="">
                                    <span class="required hide">*</span> ${text('艺人介绍')}：<i
                                        class="fa icon-question hide"></i></label>
                                <div class="col-sm-8">
                                    <#form:textarea name="et_presentation" rows="4" maxlength="500"
                                    class="form-control"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="control-label col-sm-2" title="">
                                    <span class="required hide">*</span> ${text('备注信息')}：<i
                                        class="fa icon-question hide"></i></label>
                                <div class="col-sm-10">
                                    <#form:textarea name="et_remarks" rows="4" maxlength="500" class="form-control"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="box-footer">
                <div class="row">
                    <div class="col-sm-offset-2 col-sm-10">
                        <% if (hasPermi('user:activityUser:edit')){ %>
                        <button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i>
                            ${text('保 存')}
                        </button>&nbsp;
                        <% } %>
                        <button type="button" class="btn btn-sm btn-default" id="btnCancel"
                                onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> ${text('关 闭')}
                        </button>
                    </div>
                </div>
            </div>
        </#form:form>
    </div>
</div>
<% } %>
<script>
    var $picturesUL, $showPictures;
    $("#inputForm").validate({
        submitHandler: function (form) {
            var imgArr = [];
            //遍历ul
            $picturesUL.children().each(function () {
                var index = $(this).children('img')[0].src.indexOf("/js/userfiles/");
                if (index !== -1) {
                    imgArr.push($(this).children('img')[0].src.substr(index));
                }
            });
            var urls = imgArr.join("|");
            $showPictures[0].value = urls;
            js.ajaxSubmitForm($(form), function (data) {
                js.showMessage(data.message);
                if (data.result == Global.TRUE) {
                    js.closeCurrentTabPage(function (contentWindow) {
                        contentWindow.page();
                    });
                }
            }, "json");
        }
    });
    /**
     * 添加图片
     */
    $("#addPicture").click(function () {
        $(".webuploader-element-invisible")[0].click();
    });
    /**
     * 图片目标发生改变
     */
    $("#activitySmimg").change(function () {
        var url = $(this)[0].value;
        var arr = url.split("|");
        url = arr[arr.length - 1];
        addPictures(url);
    });
    /**
     * 选择身份
     */
    $('#role').change(function () {
        if (this.value === '2') {
            $('#entertainerInfo').show();
            loadData();
        } else {
            $('#entertainerInfo').hide();
        }
    });

    /**
     * 删除图片
     * @param event
     */
    function deletePic(event) {
        $(event).parent().remove();
    }

    /**
     * 添加图片
     * @param url
     */
    function addPictures(url) {
        var li = "<li class='list-group-item'><button onclick='deletePic(this)' class='badge btn btn-danger'>删 除</button>" +
            "<img src='" + url + "' class=''/></li>";
        $picturesUL.append(li);
    }

    /**
     * 周期函数 页面初始化
     */
    $(document).ready(function () {
        $showPictures = $("#et_showPictures");
        $picturesUL = $("#picturesUL");
        if ($('#role')[0].value === '2') {
            $('#entertainerInfo').show();
            loadData();
        } else {
            $('#entertainerInfo').hide();
        }
    });

    /**
     * cleanUL
     */
    function cleanUL() {
        $picturesUL.children().remove();
        //切割内容
        var url = $showPictures[0].value;
        if (url != null && url !== '') {
            var arr = url.split("|");
            //添加
            $.each(arr, function (index, value) {
                if (value != null && value !== "") {
                    addPictures(value);
                }
            });
        }
    }

    /**
     * 拉取数据
     */
    function loadData() {
        js.loading("数据加载中...");
        var $userid = $("#userId")[0].value;
        js.ajaxSubmit("${ctx}/user/activityUserEntertainer/getEtInfo", {'userId': $userid}, function (data) {
            if (data.result == "成功") {
                var obj = data.data;
                $("#et_id")[0].value = obj.id;
                $("#et_cases")[0].value = obj.cases;
                $("#et_accessNumber")[0].value = obj.accessNumber;
                $("#et_showPictures")[0].value = obj.showPictures;
                $("#et_city")[0].value = obj.city;
                $("#et_name")[0].value = obj.name;
                if (obj.avatar != null) {
                    $("#et_avatarImg")[0].src = obj.avatar;
                }
                $("#et_phone")[0].value = obj.phone;
                $("#et_gender").select2("val", obj.gender);
                $("#et_age")[0].value = obj.age;
                $("#et_label")[0].value = obj.label;
                $("#et_presentation")[0].value = obj.presentation;
                $("#et_remarks")[0].value = obj.remarks;
                $("#cityCodeCode").val(obj.cityCode);
                $("#cityCodeName").val(obj.city);
                cleanUL();
            } else {
                // js.showMessage(data.result,"提示",1000);
                // $('#role').select2("val",'1');
                // $('#entertainerInfo').hide();
            }
            js.closeLoading(1000, true);
        });
    }

    /**
     * /**
     * 选择回调方法
     * @param id  标签的id
     * @param act 动作事件：ok、clear、cancel
     * @param index layer的索引号
     * @param layero layer内容的jQuery对象
     * @param nodes 当前选择的树节点数组
     */
    function treeselectCallback(id, act, index, layero, nodes) {
        if (id == 'cityCode' && (act == 'ok' || act == 'clear')) {
            var win = js.layer.iframeWindow(index);
            // log(act);    // 回调活动事件（ok、clear、cancel）
            // log(index);  // layer的index
            // log(layero); // layer实例对象
            // log(nodes);  // 选择的节点数据
            if (nodes) {
                $("#et_city")[0].value = nodes[0].name;
            } else {
                $("#et_city")[0].value = "";
            }
        }
    }
</script>